<template>
	<view class="content">
		<view class="left">
			<image class="avatar" :src="Avatar" mode="aspectFit"></image>
		</view>
		<view class="right">
			<view class="user-role">{{ userStore.name }}</view>
			<view class="user-mobile">{{ userStore.mobile }}</view>
		</view>
	</view>
</template>

<script setup>
import DeaultAvatar from '../../static/icons/default_avatar.png';
import Avatar from '../../static/icons/avatar.jpeg';
import { useUserStore } from '../../stores/useUserStore';

const userStore = useUserStore();
</script>

<style scoped>
.content {
	padding: 32rpx;
	display: flex;
	background-color: #fff;
}

.avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 16rpx;
}

.right {
	padding-left: 32rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
}

.user-role {
	color: #000;
	font-size: 16px;
	font-weight: bold;
}

.user-mobile {
	font: 14px;
	color: #666666;
}
</style>
